<template>
  <view class="page">
    <view class="form">
      <view class="header">
        <view class="tag"></view>
        <text class="title">填写个人信息</text>
      </view>
      <view class="content">
        <view class="item">
          <text>姓名</text>
          <input v-model="form.name" type="text" placeholder="请输入姓名" :readonly="readonly" />
        </view>
        <view class="item">
          <text>证件号码</text>
          <input v-model="form.idcard" type="idcard" placeholder="请输入证件号" :readonly="readonly" />
        </view>
        <view class="item">
          <text>性别</text>
          <radio-group v-model="form.sex" @change="e => form.sex = e.detail.value">
            <radio color="#ffa500" :value="'0'" :checked="form.sex == 0" :disabled="readonly" />男
            <radio color="#ffa500" :value="'1'" :checked="form.sex == 1" :disabled="readonly" />女
          </radio-group>
        </view>
		<view class="item">
		  <text>学院</text>
		  <input v-model="form.school" type="text" placeholder="请输入学号" :readonly="readonly" />
		</view>
		<view class="item">
		  <text>班级</text>
		  <input v-model="form.grade" type="text" placeholder="请输入班级" :readonly="readonly" />
		</view>
        <view class="item">
          <text>学号</text>
          <input v-model="form.studentId" type="text" placeholder="请输入学号" :readonly="readonly" />
        </view>
        <view class="item">
          <text>电话号码</text>
          <input v-model="form.phone" type="text" placeholder="请输入电话号码" :readonly="readonly" />
        </view>
      </view>
      <view v-if="!readonly" class="footer">
        <button class="submit-btn" @click="submit">提交</button>
      </view>
    </view>
  </view>
</template>
<script>
import { isUserCertification, getUserInfo, submitUser } from '@/api/mine'
export default {
  data() {
    return {
      form: {
        name: '',
        sex: '',
        phone: '',
        idcard: '',  
		school: '',
        grade: '',
        studentId: ''
      },
      readonly: true
    }
  },
  onLoad() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      const token = uni.getStorageSync('token')
      isUserCertification({ token }).then(res => {
        const { isture } = res;
        if(isture !='1' && isture !='2' ){
          this.readonly = false;
        }
   
        getUserInfo({ token }).then(res => {
          if (res.data) {
            const { name, idcard, sex, studentId, phone , school, grade } = res.data
            this.form = Object.assign(this.form, { name, idcard, sex, studentId, phone , school , grade })            
          }
        })
      })
    },
    submit() {
      const { name, studentId, idcard ,sex, phone , school , grade } = this.form
      if (!name || !studentId || !idcard) {
        uni.showModal({
          title: '信息缺失',
          content: '请输入姓名、身份证、学号',
          icon: 'error',
          showCancel: false
        })
        return
      }
      const token = uni.getStorageSync('token')
      submitUser({ ...this.form, ...{ token }}).then(res => {
        const { data, status, msg } = res
        if (status == 200) {
          this.form = Object.assign(this.form, data)
          uni.showToast({
            title: msg,
            icon: 'success',
            duration: 2000,
            success: function () {
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/mine/index'
                })
              }, 2000);
            }
          })
        } else {
          uni.showToast({ title: msg })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  width: 100vw;
  height: 100vh;
  background: #eee;
}
.step {
  width: 100%;
  height: 60px;
  padding-top: 10px;
  background: #fff;
}
.form {
  width: 100%;
  height: auto;
  margin-top: 5px;
  padding: 5px 10px 5px 10px;
  background: #fff;
  .header {
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 30px;
    .tag {
      width: 5px;
      height: 15px;
      margin-right: 10px;
      border-radius: 5px;
      background: orange;
    }
  }
  .content {
    margin-top: 10px;
    .item {
      margin-bottom: 5px;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      text {
        color: #bbb;
        min-width: 60px;
      }
      picker, input {
        height: 36px;
        padding-left: 10px;
        margin-left: 15px;
        flex-grow: 1;
        border-radius: 4px;
        background: #eee;
      }
      radio-group {
        height: 36px;
        margin-left: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        radio {
          margin: 0 5px;
        }
      }
      textarea {
        width: calc(100vw - 20px);
        height: 100px;
        padding: 5px;
        background: #eee;
      }
    }
  }
  .footer {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
	padding-bottom: 15rpx;
    .submit-btn {
      width: 100px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      background: orange;
    }
  }
}
</style>